/**
 * 质量安全通告管理
 */
<template>
	<el-container>
		<el-aside width="280px" class="mt10 ml10 mb10">
			<el-card class="h100">
				<el-segmented
					v-model="noticeType"
					:options="noticeTypes"
					direction="vertical"
					block
					:props="{value: 'bh'}"
				>
					<template #default="scope">
						<vp-label v-if="!scope.item.disabled" :zh="scope.item.lxZh" :en="scope.item.lxEn" align="left"  />
						<div v-else class="notice-title">
							<div>栏目内容</div>
							<div>Column Content</div>
							<el-divider class="mt10 mb0" />
						</div>
					</template>
				</el-segmented>
			</el-card>
		</el-aside>
		<el-main class="layout-parent">
			<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
				<template #search>
					<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
						<vp-search-row show-more>
							<vp-search-col :span="2">
								<el-form-item prop="fbsj">
									<template #label><vp-label zh="发布时间" en="Publish Date"/></template>
									<el-date-picker
										v-model="searchForm.fbsj"
										type="daterange"
										start-placeholder="开始日期/Start Date"
										end-placeholder="结束日期/End Date"
										value-format="YYYY-MM-DD"
										unlink-panels
										range-separator="-"
										class="w100"
									>
									</el-date-picker>
								</el-form-item>
							</vp-search-col>
							<vp-search-col>
								<el-form-item prop="ggbt">
									<template #label><vp-label zh="标题/内容" en="Title/Content"/></template>
									<el-input v-model="searchForm.ggbt" v-trim></el-input>
								</el-form-item>
							</vp-search-col>
							<vp-search-col btn-col>
								<vp-btn-search :loading="loading" @click="loadDataList"/>
								<vp-btn-reset @click="handleSearchReset"/>
							</vp-search-col>
						</vp-search-row>
					</el-form>
				</template>
				<template #actions>
					<vp-btn-add v-auth="'qualitySafetyNoticePublish.edit'" @click="handleAdd"/>
					<!-- <vp-btn-export @click="handleExport"/> -->
				</template>
				<template #table>
					<vp-vxe-table
						id="qualitySafetyNoticePublishTable"
						ref="tableRef" 
						:data="tableData" 
						@sort-change="handleSortChange" 
						row-key="id"
						v-loading="loading"
					>	
						<vxe-column type="seq" align="center" title="#" width="50" />
						<vxe-column 
							field="ggbt" 
							title="标题 Title"
							show-overflow
							min-width="250"
						>
							<template #header><vp-label zh="标题" en="Title"/></template>
						</vxe-column>
						<vxe-column 
							field="fj" 
							title="附件 Attachment"
							show-overflow
							width="160"
						>
							<template #header><vp-label zh="附件" en="Attachment"/></template>
							<template #default="scope">
								<RowAttachment 
									:attachmentList="scope.row.attachments" 
									readOnly
								/>
							</template>
						</vxe-column>
						<vxe-column 
							sortable
							field="fbsj" 
							title="发布时间 Publish Time"
							show-overflow 
							width="160"
						>
							<template #header><vp-label zh="发布时间" en="Publish Time"/></template>
						</vxe-column>
						<vxe-column 
							sortable
							field="zt" 
							title="发布状态 Status"
							show-overflow 
							width="110"
						>
							<template #header><vp-label zh="发布状态" en="Status"/></template>
							<template #default="scope">
								<span>{{ scope.row.zt === 20 ? '已发布' : '未发布' }}</span>
							</template>
						</vxe-column>
						<vxe-column 
							sortable
							field="ydrs" 
							title="阅读反馈 Feedback"
							show-overflow 
							width="100"
						>
							<template #header><vp-label zh="阅读反馈" en="Feedback"/></template>
							<template #default="scope">
								<el-link @click="handleViewReception(scope.row)">{{ scope.row.ydrs + '/' + scope.row.zrs }}</el-link>
							</template>
						</vxe-column>
						<vxe-column 
							field="operation" 
							title="操作 Operations"
							fixed="right" 
							width="180"
						>
							<template #header><vp-label-operations/></template>
							<template #default="scope">
								<el-space>
									<vp-btn-edit text v-auth="'qualitySafetyNoticePublish.edit'" @click="handleEdit(scope.row)"/>
									<vp-btn text type="primary" v-if="scope.row.zt === 10" v-auth="'qualitySafetyNoticePublish.edit'" @click="handlePublish(scope.row)">
										<vp-label zh="发布" en="Publish"/>
									</vp-btn>
									<vp-btn text type="danger" v-if="scope.row.zt === 20" v-auth="'qualitySafetyNoticePublish.withdraw'" @click="handleWithdraw(scope.row)">
										<vp-label zh="撤回" en="Withdraw"/>
									</vp-btn>
									<vp-btn-del text v-auth="'qualitySafetyNoticePublish.edit'" @click="handleDelete(scope.row)"/>
									<vp-btn-view text @click="handleView(scope.row.id)"/>
								</el-space>
							</template>
						</vxe-column>
					</vp-vxe-table>
				</template>
				<template #pagination>
					<vp-pagination
						@change="loadDataList"
						:total="page.total" 
						v-model:currentPage="page.pageNum"
						v-model:pageSize="page.pageSize"
					>
					</vp-pagination>
				</template>
				<EditNotice ref="editNoticeRef" @formSubmited="handleFormSubmited"></EditNotice>
				<ViewReception ref="viewReceptionRef"></ViewReception>
			</vp-main-page>
		</el-main>
	</el-container>
</template>
<script setup lang="ts" name="qualitySafetyNoticePublish">
import { onMounted, reactive, ref, defineAsyncComponent, watch } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import RowAttachment from '/@/components/vp/file/VpRowAttachment.vue';

const EditNotice = defineAsyncComponent(() => import('./component/EditNotice.vue'));
const ViewReception = defineAsyncComponent(() => import('./component/ViewReception.vue'));

const searchForm = reactive({
	fbsj: [],
	ggbt: "",
	xxgs: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const noticeType = ref('');

const noticeTypes = ref([] as any[]);

const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

watch(()=> noticeType.value, ()=>{
	loadDataList();
})

// 加载通告类型
const loadNoticeTypes = () => {
    request.get('/basicData/customItem/list', {
        params: {
            items: 'QUALITY_SAFETY_NOTICE_TYPE',
        }
    }).then((res) => {
        if (res.data && res.data.length > 0) {
            const sznr = res.data[0].sznr;
			noticeTypes.value = JSON.parse(sznr) || [];
			noticeType.value = noticeTypes.value[0].bh;
			noticeTypes.value.unshift({
				bh: '-',
				lxZh: '栏目内容',
				lxEn: 'Column Content',
				disabled: true,
			});
        }
    })
}

// 加载列表数据
const loadDataList = () => {
	if (noticeType.value) {
		loading.value = true;
		request.get('/quality/safetyNotice/list', {
			params: {
				...searchForm,
				...page,
				gglx: noticeType.value
			}
		}).then(res => {
			tableData.value = res?.data?.list || [];
			page.total = res?.data?.total || 0;
			page.pageNum = res?.data?.pageNum || 1;
		}).finally(()=>{
			loading.value = false;
		})
	}
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadNoticeTypes();
	loadDataList();
})

const editNoticeRef = ref();
const tableRef = ref();

const handleAdd = ()=>{
	editNoticeRef.value.handleOpen({
		type: 'add',
		gglx: noticeType.value
	});
}

const handleEdit = (row: any)=>{
	editNoticeRef.value.handleOpen({
		type: 'edit',
		id: row.id
	});
}

const handleFormSubmited = ()=>{
	loadDataList();
}

const handleView = (id: string)=>{
	router.push({
		name: "viewQualitySafetyNotice",
		params: {
			id: id,
		},
	})
}

// 删除
const handleDelete = (row: any)=>{
	VpMessageBox.confirmDelete().then(()=>{
		loading.value = true;
		request.delete(`/quality/safetyNotice/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
	});
}

// 发布
const handlePublish = (row: any)=>{
	VpMessageBox.confirm({
        zh: '是否确定发布此公告？',
        en: 'Are you sure to publish this notice?',
    }, {
        zh: '提示',
        en: 'Info',
    }, {
        type: 'warning',
    }).then(()=>{
        loading.value = true;
		request.post(`/quality/safetyNotice/publish/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
    });
}

// 撤回
const handleWithdraw = (row: any)=>{
	VpMessageBox.confirm({
        zh: '是否确定撤回此公告？',
        en: 'Are you sure to withdraw this notice?',
    }, {
        zh: '提示',
        en: 'Info',
    }, {
        type: 'warning',
    }).then(()=>{
        loading.value = true;
		request.post(`/quality/safetyNotice/withdraw/${row.id}/${row.sjbb}`).then(res => {
			loadDataList();
		}).catch(() => {}).finally(() => {
			loading.value = false;
		})
    });
}

// 查看接收情况
const viewReceptionRef = ref();
const handleViewReception = (row: any)=>{
	viewReceptionRef.value.handleOpen({
		id: row.id
	});
}

</script>

<style scoped lang="scss">
.notice-title {
    height: 50px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
	.notice-title-zh {
		line-height: 25px;
	}
	.notice-title-eh {
		line-height: 20px;
	}
}
:deep(.el-segmented) {
	padding-top: 0;
}
:deep(.el-segmented__item-label) {
	text-align: left;
	padding-left: 10px;
}
:deep(.el-segmented__item.is-disabled) {
	color: #6c6e70;
}
</style>